<template>
    <a-modal :title="title" :width="450" :destroyOnClose="true"
             :maskClosable="false"
             :visible="visible"
             @cancel="handleCancel"
             @ok="onSubmit"
    >
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">

            <!-- 字典代码 -->
            <a-form-model-item label="编号" prop="tagId" ref="tagId" v-if="isUpdate">
                <a-input placeholder="请设置标签编号" v-model="form.tagId" :disabled="isUpdate"/>
            </a-form-model-item>

            <!-- 字典名称 -->
            <a-form-model-item label="名称" prop="tagName" ref="tagName">
                <a-input placeholder="请设置标签名称" v-model="form.tagName"/>
            </a-form-model-item>


        </a-form-model>

    </a-modal>
</template>
<script>
    import {tagAdd, tagUpdate} from '../public/http.js';

    export default {
        props: ['editRecord'],
        data() {
            return {
                isUpdate: false, //是否是更新模式
                title: '新建标签',
                loading: false, //按钮Loading
                visible: true, //modal 显示状态
                labelCol: {span: 4},
                wrapperCol: {span: 20},
                form: {
                    id: null,
                    tagId: null,
                    tagName: null,

                },
                rules: {

                    tagId: {
                        required: true,
                        message: '标签编号不能为空',
                        trigger: 'blur'
                    },

                    tagName: [{
                        required: true,
                        message: '请设置标签名称',
                        trigger: 'blur'
                    }, {
                        max: 30,
                        message: '标签名称长度不能超过30个字符',
                        trigger: 'blur'
                    }],

                }
            };
        },
        methods: {
            sendAjax() {
                if (this.isUpdate) {

                    //更新模式执行的方法
                    tagUpdate(this.editRecord.id, this.form).then(res => {
                            this.$exMod.ajaxMessage(res);
                            if (res.code === 0) {
                                this.visible = false;
                                this.$emit('closeFun', {render: true});
                            }
                        }
                    );
                } else {
                    //新增模式执行的方法
                    tagAdd(this.form).then(res => {
                        this.$exMod.ajaxMessage(res);
                        if (res.code === 0) {
                            this.visible = false;
                            this.$emit('closeFun', {render: true});
                        }


                    });
                }
            },


            //表单提交事件
            onSubmit() {

                this.$refs.ruleForm.validate(valid => {
                    //表单验证通过 开始执行Ajax 请求
                    if (valid) {
                        return this.sendAjax()
                    }
                })

            },

            //关闭弹窗
            handleCancel() {
                this.visible = false;
                this.$emit('closeFun', {
                    render: false
                });
            },


            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};
                if (obj.id) {
                    this.form = {...obj};
                    this.isUpdate = true;

                    this.title = `修改标签`;
                }
            },
            //数据初始化
            async init() {
                this.fromVal();
            }

        },
        created() {
            this.init();
        }
    };
</script>
